import React from "react";
import { Carousel, Tag } from 'antd';
import { useNavigate } from "react-router-dom";
const contentStyle = {
    height: '160px',
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
    background: '#364d79',
};
import { SearchOutlined, ScanOutlined, UserOutlined, RedEnvelopeOutlined, LockOutlined, ShoppingOutlined, CaretDownOutlined } from '@ant-design/icons'
import '../css/lxklist.css'
import { Dropdown, Radio, Space } from 'antd-mobile'
import { ArrowDownCircleOutline, DownOutline } from 'antd-mobile-icons'
export default function List() {
    const Navigate = useNavigate()
    return (
        <div>
            <div className="header">
                <div className="img">
                    <Carousel autoplay>
                        <div>
                            <h3 style={contentStyle}>
                                <img src="https://img95.699pic.com/photo/40243/3435.jpg_wh860.jpg" alt="" height={180} width={380} />
                            </h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}>
                                <img src="https://img95.699pic.com/photo/40214/4126.jpg_wh300.jpg!/fh/300/quality/90" alt="" height={180} width={380} />
                            </h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}>
                                <img src="https://img95.699pic.com/photo/40169/4394.jpg_wh300.jpg" alt="" height={180} width={380} />
                            </h3>
                        </div>
                    </Carousel>
                </div>
                <div className="search">
                    <div className="left" style={{ width: '0.5rem', height: '0.5rem', backgroundColor: 'rgba(0,0,0,0.5)', borderRadius: '50%', color: 'white', textAlign: 'center', lineHeight: '0.5rem' }}>
                        <span><ScanOutlined /></span>
                    </div>
                    <div className="right" style={{ width: '0.5rem', height: '0.5rem', backgroundColor: 'rgba(0,0,0,0.5)', borderRadius: '50%', color: 'white', textAlign: 'center', lineHeight: '0.5rem' }}>
                        <span onClick={() => Navigate('/lxksearch')}><SearchOutlined /></span>
                    </div>
                </div>
            </div>
            <div className="func">
                <ul>
                    <li>
                        <div>
                            <div className="top">
                                <svg t="1732623271757" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8454" width="200" height="200"><path d="M743.36 371.63c-5.71 0-10.32-4.62-10.32-10.32v-43.14c0-11.05-8.97-20.03-20.02-20.03H308.4c-11.05 0-20.04 8.98-20.04 20.03v43.14c0 5.71-4.62 10.32-10.32 10.32-5.71 0-10.32-4.62-10.32-10.32v-43.14c0-22.43 18.25-40.67 40.68-40.67h404.62c22.42 0 40.66 18.25 40.66 40.67v43.14c0 5.7-4.61 10.32-10.32 10.32z" fill="#F7B52C" p-id="8455"></path><path d="M856.34 361.31H167.86c-37.75 0-68.64 25.88-68.64 57.5v451.47c0 31.63 30.89 57.5 68.64 57.5h688.48c37.75 0 68.64-25.88 68.64-57.5V418.81c0-31.63-30.89-57.5-68.64-57.5zM719.55 835.98H320.72c-4.83 0-8.78-3.95-8.78-8.78 0-4.83 3.95-8.78 8.78-8.78h398.83c4.83 0 8.78 3.95 8.78 8.78 0.01 4.83-3.95 8.78-8.78 8.78z m133.58-328.33H567.05V675.3H451.23V507.65h-294.1V489.2h695.99v18.45z" fill="#F7B52C" p-id="8456"></path></svg>
                            </div>
                            <div className="bottom">
                                附近职位
                            </div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <div className="top">
                                <svg t="1732623575288" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18558" width="200" height="200"><path d="M701.6 424c1 7.9 2.4 15.8 2.4 24 0 106-86 192-192 192s-192-86-192-192c0-8.2 1.4-16 2.4-24-56.6-36.5-102.2-88.5-130.4-150.3l0 536.9c0 47.1 38.2 85.3 85.3 85.3l469.3 0c47.1 0 85.3-38.2 85.3-85.3L831.9 273.8C803.8 335.5 758.1 387.6 701.6 424zM342.8 359.1C375 298.1 438.2 256 512 256s137 42.1 169.2 103.1c66.1-49 111.1-124.9 116.9-212.1-14.4-11.2-31.7-19-51.4-19L277.3 128c-19.7 0-37 7.8-51.4 19C231.7 234.1 276.7 310.1 342.8 359.1zM611.8 459c10.1 0 17.4-7.3 17.4-17.4s-7.3-17.4-17.4-17.4l-68.8 0 68.9-68.9c6.9-6.9 6.9-17.6 0-24.5-6.9-6.9-17.6-6.9-24.5 0l-75.2 75.1-75.4-77.4c-6.9-6.9-17.6-6.9-24.5 0-3.4 3.4-5.2 7.8-5.2 12.3 0.1 4.6 1.9 8.9 5.2 12.1l69.2 71.2-69.1 0c-10.1 0-17.4 7.3-17.4 17.4s7.3 17.4 17.4 17.4l82.3 0 0 31.6-82.3 0c-10.1 0-17.4 7.4-17.4 17.5s7.3 17.4 17.4 17.4l82.3 0 0 49.1c0 10.1 7.3 17.4 17.4 17.4s17.4-7.3 17.4-17.4l0-49.1 82.3 0c10.1 0 17.4-7.3 17.4-17.4s-7.3-17.5-17.4-17.5l-82.3 0L529.5 459 611.8 459z" fill="#EA8010" p-id="18559"></path></svg>
                            </div>
                            <div className="bottom">
                                新人红包
                            </div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <div className="top">
                                <svg t="1732623622885" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19587" width="200" height="200"><path d="M531.775390625 119.89108276367188h-49.361228942871094C358.27723693847656 119.89108276367188 256.61936950683594 221.4717025756836 256.61936950683594 345.68587493896484v192.11483001708984c0 45.653343200683594 37.31060028076172 82.96394348144531 82.96394348144531 82.96394348144531h334.9456787109375c45.653343200683594 0 82.96394348144531-37.31060028076172 82.96394348144531-82.96394348144531V345.68587493896484C757.570182800293 221.4717025756836 655.9895629882812 119.89108276367188 531.775390625 119.89108276367188z" fill="#DCDACC" p-id="19588"></path><path d="M697.394287109375 497.63194274902344c0 34.684181213378906-28.349876403808594 63.0340576171875-63.0340576171875 63.0340576171875H379.9065704345703c-34.684181213378906 0-63.0340576171875-28.349876403808594-63.0340576171875-63.0340576171875v-145.9980010986328c0-94.31934356689453 77.17037200927734-171.56696319580078 171.56696319580078-171.56696319580078H525.9045715332031c94.31934356689453 0 171.56696319580078 77.17037200927734 171.56696319580078 171.56696319580078v145.9980010986328z" fill="#FEC459" p-id="19589"></path><path d="M525.9045715332031 180.06697845458984h-37.46509552001953c-94.31934356689453 0-171.56696319580078 77.17037200927734-171.56696319580078 171.56696319580078v145.9980010986328c0 34.684181213378906 28.349876403808594 63.0340576171875 63.0340576171875 63.0340576171875h254.4536590576172c34.684181213378906 0 63.0340576171875-28.349876403808594 63.0340576171875-63.0340576171875v-145.9980010986328c0-94.31934356689453-77.17037200927734-171.56696319580078-171.48971557617188-171.56696319580078z m137.50076293945312 294.77691650390625c0 28.504371643066406-23.328781127929688 51.75590515136719-51.75590515136719 51.75590515136719H402.61737060546875c-28.504371643066406 0-51.75590515136719-23.328781127929688-51.75590515136719-51.75590515136719V354.9555892944336c0-77.47936248779297 63.42029571533203-140.899658203125 140.899658203125-140.899658203125h30.821800231933594c77.47936248779297 0 140.899658203125 63.42029571533203 140.899658203125 140.899658203125v119.8883056640625z" fill="#CCC9B6" p-id="19590"></path><path d="M522.5056762695312 214.1331787109375h-30.821800231933594c-77.47936248779297 0-140.899658203125 63.42029571533203-140.899658203125 140.899658203125V474.921142578125c0 28.504371643066406 23.328781127929688 51.75590515136719 51.75590515136719 51.75590515136719H611.6494293212891c28.504371643066406 0 51.75590515136719-23.328781127929688 51.75590515136719-51.75590515136719V354.9555892944336c0-77.47936248779297-63.42029571533203-140.8224105834961-140.899658203125-140.8224105834961z" fill="#FFFFFF" p-id="19591"></path><path d="M316.5635223388672 395.9740753173828c-69.75460052490234 0-126.84059143066406 57.08599090576172-126.84059143066406 126.84059143066406v78.02009582519531c0 168.63155364990234 137.96424865722656 306.5185546875 306.5185546875 306.5185546875h10.814666748046875v-511.3792419433594H316.5635223388672z" fill="#FEC459" p-id="19592"></path><path d="M316.8725128173828 586.4667053222656c-20.547866821289062 0-37.387847900390625-16.839981079101562-37.387847900390625-37.387847900390625v-47.893524169921875c0-20.547866821289062 16.839981079101562-37.387847900390625 37.387847900390625-37.387847900390625 20.547866821289062 0 37.387847900390625 16.839981079101562 37.387847900390625 37.387847900390625v47.893524169921875c0 20.547866821289062-16.839981079101562 37.387847900390625-37.387847900390625 37.387847900390625z" fill="#FED98F" p-id="19593"></path><path d="M824.5438690185547 600.8347625732422V522.8146667480469c0-69.75460052490234-57.08599090576172-126.84059143066406-126.84059143066406-126.84059143066406H507.1333999633789v511.3792419433594h10.814666748046875c168.63155364990234 0.07724761962890625 306.5958023071289-137.88700103759766 306.5958023071289-306.5185546875z" fill="#FDA832" p-id="19594"></path><path d="M507.1333999633789 593.9597244262695m-68.75038146972656 0a68.75038146972656 68.75038146972656 0 1 0 137.50076293945312 0 68.75038146972656 68.75038146972656 0 1 0-137.50076293945312 0Z" fill="#523820" p-id="19595"></path><path d="M507.1333999633789 716.5516967773438c-20.547866821289062 0-37.387847900390625-16.839981079101562-37.387847900390625-37.387847900390625v-47.81627655029297c0-20.547866821289062 16.839981079101562-37.387847900390625 37.387847900390625-37.387847900390625 20.547866821289062 0 37.387847900390625 16.839981079101562 37.387847900390625 37.387847900390625v47.81627655029297c0 20.547866821289062-16.839981079101562 37.387847900390625-37.387847900390625 37.387847900390625z" fill="#523820" p-id="19596"></path><path d="M507.1333999633789 593.9597244262695m-28.04088592529297 0a28.04088592529297 28.04088592529297 0 1 0 56.08177185058594 0 28.04088592529297 28.04088592529297 0 1 0-56.08177185058594 0Z" fill="#7C4E24" p-id="19597"></path></svg>
                            </div>
                            <div className="bottom">
                                经济人
                            </div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <div className="top">
                                <svg t="1732623676081" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21470" width="200" height="200"><path d="M512.3 250.5c112.2 0 170.4 102.9 196.6 143.9 0-1.5 0.1-3 0.1-4.4 0-92.8 0-233.1-192.4-233.1-186.5 0-192.2 131.8-192.4 224.4 23.2-46.3 74.9-130.8 188.1-130.8zM169.9 753.8c-37.6 25.3-61.7 99.8-69.1 131h390.7L360.9 665c-39.2 15.6-148.8 60.4-191 88.8zM853.3 753.8c-42.1-28.3-151.8-73.2-190.9-88.8L531.7 884.7H924c-2.8-15.3-20-96.8-70.7-130.9z" fill="#FFD524" p-id="21471"></path><path d="M516.5 666.6h0.2c139.5-0.2 228.4-181.7 228.4-276.5 0-87.4 0-269.1-228.4-269.1S288.3 302.8 288.3 390.1c0 58.1 33.8 153.7 96.5 216.3 39.5 39.3 85 60.2 131.7 60.2zM324.3 381.4c0.2-92.6 5.9-224.4 192.4-224.4 192.4 0 192.4 140.3 192.4 233.1 0 1.4-0.1 2.9-0.1 4.4-2.6 85.3-81.1 235.9-192.3 236.1h-0.2c-37.5 0-73.2-16.7-106.2-49.7-55.8-55.7-86-139.9-86-190.8v-8.7z" fill="#6B400D" p-id="21472"></path><path d="M960.1 882c-0.7-4.5-17.7-111.7-86.7-158.2-54.8-36.9-205.8-95.6-212.2-98.1-8.2-3.2-17.5 0-22 7.6L511.6 848 384 633.4c-4.5-7.6-13.8-10.8-22-7.6-6.4 2.5-157.4 61.2-212.2 98.1-59.1 39.8-84 152.3-85.1 157.1-2.1 9.7 4.1 19.3 13.8 21.4 1.3 0.3 2.6 0.4 3.8 0.4 8.3 0 15.8-5.8 17.6-14.2 0.2-1.1 0.6-2.5 0.9-3.8 7.4-31.2 31.5-105.7 69.1-131 42.1-28.3 151.8-73.2 190.9-88.8l130.7 219.8 4.6 7.7c3.3 5.5 9.1 8.8 15.5 8.8s12.2-3.3 15.5-8.8l4.6-7.7L662.3 665c39.2 15.6 148.8 60.5 190.9 88.8 50.7 34.1 67.9 115.6 70.7 131 0.3 1.5 0.5 2.6 0.5 2.7 1.5 9.8 10.8 16.7 20.5 15.1 10-1.5 16.7-10.7 15.2-20.6z" fill="#6B400D" p-id="21473"></path></svg>
                            </div>
                            <div className="bottom">
                                求职顾问
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div className="screen">
                <Dropdown arrow={<DownOutline />}>
                    <Dropdown.Item key='sorter' title='排序'>
                        <div style={{ padding: 12 }}>
                            排序
                            <br />
                            排序
                            <br />
                            排序
                            <br />
                            排序
                            <br />
                        </div>
                    </Dropdown.Item>
                    <Dropdown.Item
                        key='bizop'
                        title='位置'
                        arrow={<ArrowDownCircleOutline />}
                    >
                        <div style={{ padding: 12 }}>
                            位置
                            <br />
                            位置
                            <br />
                            位置
                            <br />
                        </div>
                    </Dropdown.Item>
                    <Dropdown.Item key='more' title='公司'>
                        <div style={{ padding: 12 }}>
                            公司
                            <br />
                            公司
                            <br />
                        </div>
                    </Dropdown.Item>
                    <Dropdown.Item key='yao' title='要求'>
                        <div style={{ padding: 12 }}>
                            要求
                            <br />
                            要求
                            <br />
                        </div>
                    </Dropdown.Item>
                </Dropdown>
            </div>
            <div className="main">
                <ul>
                    <li>
                        <div onClick={()=>Navigate('/lxkpshow')}>
                            <h4><span>高级客户经理</span> <span style={{ float: 'right' }}>15k-30k</span></h4>
                            <p><Tag>本科</Tag><Tag>1-3年</Tag><Tag>深圳市 南山区</Tag></p>
                        </div>
                        <div style={{ marginTop: '20px' }} onClick={()=>Navigate('/lxkcshow')}>
                            <div className="img2">
                                <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.jdP04yEoxG10mcywseQj7gAAAA?rs=1&pid=ImgDetMain" alt="" height={100} width={100} />
                            </div>
                            <div className="right2">
                                <p>阿里巴巴</p>
                                <p><span>上市公司</span>·<span>10000人</span>·<span>电子商务</span></p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <h4><span>高级客户经理</span> <span>15k-30k</span></h4>
                            <p><Tag>本科</Tag><Tag>1-3年</Tag><Tag>深圳市 南山区</Tag></p>
                        </div>
                        <div>
                            <div className="img2">
                                <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.jdP04yEoxG10mcywseQj7gAAAA?rs=1&pid=ImgDetMain" alt="" height={100} width={100} />
                            </div>
                            <div className="right2">
                                <p>阿里巴巴</p>
                                <p><span>上市公司</span>·<span>10000人</span>·<span>电子商务</span></p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    )
}